<template>
	<view>
		<!-- 搜索 -->
		<view class="searchFor" :style="{marginTop: (navigationBarHeight + statusBarHeight) + 'px'}">
			<!-- <view class="left">
				<image src="../../static/homePage/magnifier.jpg" mode=""></image>
				<input type="text" placeholder="搜索内容" />
			</view>
			<image src="../../static/homePage/customer.jpg" mode="" class="right"></image> -->
		</view>
		<image class="bannerImg" src="https://img.wilmer.com.cn/admin/2024/3-22/WechatIMG24.jpg" mode=""></image>
		<view class="product">
			<button class="btn" @click="College(0)">
				<view class="product_box">
					<image src="https://img.wilmer.com.cn/admin/2024/3-19/CollegeLibrary.jpg" mode=""></image>
					<text>院校库</text>
				</view>
			</button>
			<button class="btn" @click="College(1)">
				<view class="product_box">
					<image src="https://img.wilmer.com.cn/admin/2024/3-19/Professional.jpg" mode=""></image>
					<text>专业库</text>
				</view>
			</button>
			<button class="btn" @click="knowledge()">
				<view class="product_box">
					<image src="https://img.wilmer.com.cn/admin/2024/3-19/knowledge.jpg" mode=""></image>
					<text>知识库</text>
				</view>
			</button>
			<button open-type="contact" class="btn">
				<view class="product_box">
					<image src="https://img.wilmer.com.cn/admin/2024/3-19/seek.jpg" mode=""></image>
					<text>咨询顾问</text>
				</view>
			</button>
		</view>
		<view class="notice Events">
			<view class="left">
				<image src="https://img.wilmer.com.cn/admin/2024/3-19/1.jpg" mode=""></image>
				热门活动
			</view>
			<view class="right" @click="onEvents()"><text>查看更多</text>
				<image src="https://img.wilmer.com.cn/admin/2024/3-19/2.jpg" mode=""></image>
			</view>
		</view>
		<view class="skill-sequence-panel-content-wrapper">
			<view class="hide-content-box hide-content-box-left"></view>
			<view class="hide-content-box hide-content-box-right"></view>
			<!-- 中间数据 -->
			<scroll-view scroll-x="true" class="kite-classify-scroll">
				<view style="display: flex;">
					<view class="activitf" v-for="(item, index) in activityList" :key="index" @click="onDetails(item)">
						<image class="acCover" :src="item.acCover" mode=""></image>
						<view class="title uni-ellipsis-2">{{item.acTitle}}</view>
						<view class="time">{{Timeprocessing(item.acFinish)}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="notice">
			<view class="left">
				<image src="https://img.wilmer.com.cn/admin/2024/3-19/smallBell.jpg" mode=""></image>
				院校通知
			</view>
			<view class="right" @click="onMore()"><text>查看更多</text>
				<image src="../../static/homePage/more.jpg" mode=""></image>
			</view>
		</view>
		<view class="skill-sequence-panel-content-wrapper">
			<!--左边虚化-->
			<view class="hide-content-box hide-content-box-left"></view>
			<!--右边虚化-->
			<view class="hide-content-box hide-content-box-right"></view>
			<!-- 中间数据 -->
			<scroll-view scroll-x="true" class="kite-classify-scroll">
				<view class="screen" v-for="(item, index) in curriculum" :key="index"
					:class="{'special' : currindex== index}" @click="onclick(item,index)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view>
			<view class="nav" v-for="(item,index) in projectList" :key="index" @click="onSelect(item)">
				<view class="title">{{item.infoTitle}}</view>
				<view class="nav_content uni-ellipsis-2">{{item.infoAbs}}</view>
				<view class="endof">
					<view class="left">小默</view>
					<view class="right">{{item.creatTime.substring(0,10)}}</view>
				</view>
			</view>
			<image v-if="projectList.length == 0" class="NoData"
				src="https://img.wilmer.com.cn/admin/2024/3-20/WechatIMG19.jpg" mode=""></image>
		</view>
		<view style="height: 100rpx;width: 1rpx;"></view>
	</view>
</template>

<script>
	import {
		schoolList,
		activity
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				curriculum: [{
						name: '全部',
						content: ''
					},
					{
						name: '院校资料',
						content: '院校资料'
					},
					{
						name: '申请信息',
						content: '申请信息'
					},
					{
						name: '奖学金',
						content: '奖学金'
					},
					{
						name: '活动预告',
						content: '活动预告'
					},
					{
						name: '简报',
						content: '简报'
					}
				],
				currindex: 0,
				projectList: [],
				infoType: "",
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度
				activityList: [] // 活动列表
			};
		},
		onShow() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},
		mounted() {
			this.getData();
			this.getactivity()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				schoolList({
					infoType: this.infoType
				}).then(res => {
					if (res.data.code == 200) {
						this.projectList = res.data.rows;
					} else {}
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
				});
			},
			onclick(item, index) {
				this.currindex = index
				this.infoType = item.content
				this.getData()
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			onSelect(item) {
				uni.navigateTo({
					url: `/pages/knowledge/index?id=${item.infoId}`
				})
			},
			getactivity() {
				activity().then(res => {
					this.activityList = res.data.rows
				})
			},
			Timeprocessing(originalDateStr) {
				const originalDate = new Date(originalDateStr);
				const year = originalDate.getFullYear();
				const month = originalDate.getMonth() + 1; // 月份从 0 开始，所以要加 1
				const date = originalDate.getDate();
				const targetDateStr = `${year - 1}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`;
				return targetDateStr
			},
			// 院校库
			College(val) {
				uni.navigateTo({
					url: `/pages/school/CollegeLibrary?id=${val}`
				})
			},
			// 热门活动
			onEvents() {
				uni.navigateTo({
					url: '/pages/customer/activity'
				})
			},
			onDetails(item) {
				uni.navigateTo({
					url: `/pages/customer/activityDetails?id=${item.acId}`
				})
			},
			// 知识库
			knowledge() {
				uni.navigateTo({
					url: '/pages/school/knowledge-base'
				})
			},
			// 院校通知
			onMore() {
				uni.navigateTo({
					url: '/pages/knowledge/List'
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: auto;
		background: #FFF;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	.uni-ellipsis-2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.searchFor {
		width: 700rpx;
		// height: 64rpx;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 588rpx;
			height: 64rpx;
			background: #F8F8F8;
			border-radius: 50rpx;
			display: flex;
			align-items: center;

			image {
				width: 20rpx;
				height: 20rpx;
				margin: 0 24rpx;
			}
		}

		.right {
			width: 44rpx;
			height: 44rpx;
			margin-right: 22rpx;
		}
	}

	.bannerImg {
		width: 686rpx;
		height: 300rpx;
		margin: 32rpx auto 0;
		display: block;
	}

	.product {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.product_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;


			image {
				width: 88rpx;
				height: 88rpx;
			}

			text {
				margin-top: 12rpx;
				font-family: PingFang SC;
				font-size: 20rpx;
				font-weight: 400;
				letter-spacing: 0em;
			}
		}
	}

	::v-deep .product .btn {
		background-color: rgba(0, 0, 0, 0);
		margin: 0;
	}

	::v-deep .product .btn:after {
		border: none;
	}

	.notice {
		width: 686rpx;
		height: 80rpx;
		margin: 30rpx auto 0;
		background: url('https://img.wilmer.com.cn/admin/2024/3-15/WechatIMG253.jpg') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 8rpx;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin: 0 12rpx 0 18rpx;
			}

			font-family: PingFang SC;
			font-size: 20px;
			font-weight: 500;
			letter-spacing: 0em;
			color: #FFFFFF;
		}

		.right {
			width: 148px;
			height: 52px;
			margin-right: 18rpx;
			width: 147rpx;
			height: 52rpx;
			border-radius: 44rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 14rpx;
				height: 14rpx;
				margin-left: 2rpx;
			}

			text {
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: 400;
				color: #1890FF;
			}
		}
	}

	.Events {
		background:
			linear-gradient(248.01deg, #FF7E6C 5.55%, #FE5A79 89.67%);

		.right {
			color: #F8373E;

			text {
				color: #F8373E;
			}
		}
	}

	.nav {
		width: 686rpx;
		border-radius: 6px;
		box-shadow: 0px 1px 4px 1px #00000026;
		background: #FFFFFF;
		margin: 20rpx auto 0;
		padding: 20rpx 0;

		.title {
			width: 640rpx;
			margin: 0 auto;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 1;
			color: #333333;
		}

		.nav_content {
			width: 640rpx;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
			margin: 20rpx auto 0;
		}

		.endof {
			margin-top: 30rpx;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				margin-left: 20rpx;
			}

			.right {
				margin-right: 40rpx;
			}
		}

	}

	.screen {
		display: inline-block;
		padding: 6rpx 14rpx;
		border-radius: 52rpx;
		background: linear-gradient(0deg, #D9D9D9, #D9D9D9),
			linear-gradient(0deg, #F1F2F6, #F1F2F6);
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		margin-left: 20rpx;
	}

	.special {
		color: #FFFFFF;
		background: #6CAFFF;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: #0081ff;

			span {
				background-color: #0081ff;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		margin-top: 8px;
		width: calc(100% - 20px);
		overflow: hidden;
		white-space: nowrap;
	}

	.activitf {
		width: 200rpx;
		margin-left: 26rpx;
		display: flex;
		flex-direction: column;

		.acCover {
			width: 200rpx;
			height: 240rpx;
		}

		.title {
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			margin-top: 10rpx;
		}

		.time {
			font-family: PingFang SC;
			font-size: 20rpx;
			font-weight: 400;
			margin-top: 8rpx;
		}
	}

	.NoData {
		display: block;
		width: 400rpx;
		height: 318rpx;
		margin: 40rpx auto 0;
	}
</style>